<template>
  <div class="payContainer">

    <div class="select">
      <div class="text">请选择支付方式</div>

      <van-radio-group v-model="radio" class="group">
        <van-radio name="1" class="ra1">微信</van-radio>
        <van-radio name="2" class="ra2">支付宝</van-radio>
      </van-radio-group>
    </div>

    <footer class="footer" @click="pay">
      确定
    </footer>
  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  name: "Pay",

  data(){
    return {
      radio: ''
    }
  },


  methods:{
    pay(){
      Toast.success('提交订单成功')
      this.$router.push('/home')
    },
  },

}
</script>

<style lang="less" scoped>
.payContainer {
  font-size:14px;
  width: 100%;
  height: 660px;
  background-color: #eee;
  display: flex;
  flex-direction: column;
}
.payContainer .select {
  width: 100%;
  height: 292px;
  flex: 1;
}

.payContainer .select .text {
  width: 100%;
  height: 24px;
  line-height: 24px;
  padding: 10px 10px;
  color: #ccc;
}

.payContainer .select .group{
  width: 100%;
  height: 100px;
  background-color: #fff;
  padding: 10px;
  .ra1{
    width: 100%;
    height: 54px;
  }
  .ra2{
    width: 100%;
    height: 54px;
  }
}
    // .van-radio


.payContainer .footer {
  width: 100%;
  height: 70px;
  background-color: red;
  color: #fff;
  text-align: center;
  line-height: 70px;
  font-size: 17px;
}
</style>
